<template>
    <div id="MobileHome">
        <div class="content" ref="list">
            <header>
                <img src="../../assets/img/logo.png" alt="">
                <div>济南教育云地图</div>
            </header>
            <div class="map-box">
                <div class="map" id="map"></div>
                <div class="app-download">
                    <i class="el-icon-mobile-phone"/>
                    <span @click="downLoad">下载济南教育App</span>
                </div>
            </div>

        </div>
        <div class="content-box" ref="list">
            <div class="search-box" v-show="navContent !== 'details'">
                <input type="text" placeholder="请输入学校名称" v-model="schoolParams.title">
                <div>
                    <div class="icon-bg" @click="getLeftSchool">
                        <img src="../../assets/img/sousuo.png" alt="">
                    </div>
                </div>
            </div>
            <div class="select-box" v-show="navContent !== 'details'">
                <!--<div>筛选</div>-->
                <div>
                    <div
                            v-for="(item, index) of selectBtn"
                            :key="index" :class="{select: item.select}"
                            @click="changeSelect(item)"
                    >{{item.name}}
                    </div>
                </div>
            </div>
            <div class="nav-list">
                <div class="info-box" v-show="navContent === 'info'">
                    <div class="nav-title">教育资讯</div>
                    <div class="list-box">
                        <div class="list-item"
                             v-for="(item, index) of leftNews"
                             :key="index"
                             @click="toDetails(item)">
                            <div class="item-top" v-if="item.thumb">
                                <div class="banner-box">
                                    <img :src="item.thumb && item.thumb" alt="">
                                </div>
                                <div class="item-content">
                                    <div>{{item.title}}</div>
                                    <div>{{item.updatetime}}</div>
                                </div>
                            </div>
                            <div class="item-bottom" v-if="!item.thumb">
                                <div>{{item.title}}</div>
                                <div>{{item.updatetime}}</div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="more-btn" @click="toInfo">查看更多资讯</div>-->
                </div>
                <div class="school-box">
                    <div :class="{'school-item': true, 'school-item-focus': schoolItemIndex === index}"
                         v-for="(school, index) of highSchoolList"
                         :key="index"
                         @click="toSchoolInfo(school, index)"
                         v-show="navContent === 'school'">
                        <div>{{school.title}}</div>
                        <span>〉</span>
                    </div>
                </div>
                <div class="school-details" v-show="navContent === 'details'">
                    <div @click="navContent = 'school'">
                        <i class="el-icon-arrow-left"></i>
                        <span>返回</span>
                    </div>
                    <div class="school-info">
                        <h2>学校简介</h2>
                        <div class="info-banner">
                            <img :src="schoolDetails.school && schoolDetails.school.thumb"
                                 @click="toOutLink(schoolDetails.school)" alt="">
                        </div>
                        <div :class="{'info-introduce': true, 'two-line': !description}">
                            {{schoolDetails.school && schoolDetails.school.description}}
                        </div>
                        <!--<div class="info-introduce"-->
                        <!--        v-show="description">-->
                        <!--    {{schoolDetails.school && schoolDetails.school.description}}-->
                        <!--</div>-->
                        <div class="more-btn"
                             v-show="!description"
                             @click="description = true">
                            查看更多资讯
                        </div>
                        <div class="school-info-box" v-show="schoolDetails.vr">
                            <h2>VR校园</h2>
                            <div class="img-box">
                                <img :src="schoolDetails.vr && schoolDetails.vr.thumb" alt=""
                                     @click="toOutLink(schoolDetails.vr)">
                            </div>
                        </div>
                        <h2 v-show="this.schoolDetails.grade && this.schoolDetails.grade.length !== 0">往年录取分数线</h2>
                        <div v-show="this.schoolDetails.grade && this.schoolDetails.grade.length !== 0"
                             id="fractional-line"></div>
                        <h2>校园资讯</h2>
                        <div class="tab-box">
                            <div :class="`tab-item ${tab.select && 'tab-focus'}`"
                                 v-for="(tab, index) of infoTab"
                                 @click="changeSchoolInfoTab(tab)"
                                 :key="index">
                                {{tab.name}}
                            </div>
                        </div>
                        <div class="list-box" v-show="infoType !== 3">
                            <div class="list-item" v-for="(item, index) of schoolDetails.zixun" :key="index"
                                 @click="toDetails(item)">
                                <div class="item-top" v-if="item.thumb">
                                    <div class="banner-box">
                                        <img :src="item.thumb" alt="">
                                    </div>
                                    <div class="item-content">
                                        <div>{{item.title}}</div>
                                        <div>{{item.updatetime}}</div>
                                    </div>
                                </div>
                                <div class="item-bottom" v-if="!item.thumb">
                                    <div>{{item.title}}</div>
                                    <div>{{item.updatetime}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="teacher-list" v-show="infoType === 3">
                            <div class="teacher-item" v-for="(item, index) of schoolDetails.zixun" :key="index">
                                <div>
                                    <img :src="item.thumb" alt="">
                                </div>
                                <div>{{item.title}}</div>
                            </div>
                        </div>
                        <div class="school-info-box" v-show="schoolDetails.xzyy">
                            <h2>尹萍姐姐去上学</h2>
                            <div class="img-box">
                                <img :src="schoolDetails.xzyy && schoolDetails.xzyy.thumb" alt="" @click="toOutLink(schoolDetails.xzyy)">
                            </div>
                        </div>
                        <div class="school-info-box" v-show="schoolDetails.xypic && schoolDetails.xypic.length !== 0">
                            <h2>多彩校园</h2>
                            <Carousel trigger="click" height="150px">
                                <CarouselItem v-for="(item, index) in schoolDetails.xypic" :key="index">
                                    <img :src="item.thumb" alt="" class="swiper-img">
                                </CarouselItem>
                            </Carousel>
                        </div>
                        <div class="school-info-box">
                            <h2>了解更多</h2>
                            <div class="code" v-if="schoolDetails.school && schoolDetails.school.adpic">
                                <div v-for="(item, index) of schoolDetails.school.adpic" :key="index">
                                    <img :src="item.url" alt="">
                                    <span>{{item.alt}}</span>
                                </div>
                                <!--<img :src="schoolDetails.school && schoolDetails.school.erweima" alt="">-->
                                <!--<div>扫描左侧二维码了解该学校更多详情</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import axios from 'axios'
    import * as qs from 'query-string'
    import moment from 'moment'
    import {options} from '../../assets/js/fractional-options'
    import {Carousel, CarouselItem} from 'element-ui'

    export default {
        name: "MobileHome",
        components: {
            Carousel,
            CarouselItem
        },
        data() {
            return {
                description: false,
                loading: false,
                finished: false,
                schoolList: [
                    {name: '山东省实验中学', center: [117.010947, 36.664859]},
                    {name: '济南山师附中', center: [117.047495, 36.664543]},
                    {name: '济南三中', center: [117.005964, 36.59362]}
                ],
                selectBtn: [
                    {name: '首页', select: true, stype: '', type: 'info'},
                    {name: '全部', select: false, stype: '', type: 'school'},
                    {name: '普通高中', select: false, stype: 1, type: 'school'},
                    {name: '职业学校', select: false, stype: 2, type: 'school'}
                ],
                schoolParams: {
                    catid: 603,
                    stype: '',
                    title: '',
                },
                leftNews: [],
                highSchoolList: [],
                // nav内容显示内容 true 学校 false 为资讯
                navContent: 'info',
                newParams: {
                    // 资讯604
                    catid: 604,
                    num: 20,
                    page: 1,
                    thumb: 0,
                    // 学校id
                    // school: '',
                    // 学校名称
                    // title: ''
                },
                schoolInfo: '',
                schoolItemIndex: '',
                schoolDetails: {},
                allowRequest: true,
                infoTab: [
                    {name: '动态', newstype: 1, select: true},
                    {name: '招考', newstype: 2, select: false},
                    {name: '师资', newstype: 3, select: false},
                    {name: '教学', newstype: 4, select: false}
                ],
                infoType: 1
            }
        },
        methods: {
            changeSelect(item) {
                this.selectBtn.map(btn => btn.select = false)
                item.select = true
                this.navContent = item.type
                this.schoolParams.stype = item.stype
                if(item.type === 'school') {
                    this.getLeftSchool()
                }
            },
            /**
             * 初始化地图
             */
            initMap() {
                this.$nextTick(() => {
                    let map = new AMap.Map('map', {
                        center: [117.000923, 36.675807],
                        zoom: 11
                    })
                    let icon = new AMap.Icon({
                        // size: new AMap.Size(40, 50),    // 图标尺寸
                        imageSize: new AMap.Size(16, 25),
                        // offset: new AMap.Pixel(-9,-25),
                        // anchor:'top-center', // 设置锚点方位
                        image: require('../../assets/img/icon.png'),  // Icon的图像
                    });
                    this.schoolList.map(item => {
                        // console.log([parseInt(item.longitude), parseInt(item.latitude)])
                        item.center = [parseFloat(item.longitude), parseFloat(item.latitude)]
                        // 创建一个 Marker 实例：
                        var marker = new AMap.Marker({
                            position: new AMap.LngLat(...item.center),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            data: {...item},
                            icon: icon,
                        })
                        // 将创建的点标记添加到已有的地图实例：
                        map.add(marker);
                        // let circleMarker = new AMap.CircleMarker({
                        //     center: item.center,
                        //     radius: '10px',//3D视图下，CircleMarker半径不要超过64px
                        //     strokeColor: 'white',
                        //     strokeWeight: 2,
                        //     strokeOpacity: 0.8,
                        //     fillColor: 'rgba(209,72,23,1)',
                        //     fillOpacity: 0.8,
                        //     zIndex: 10,
                        //     bubble: true,
                        //     cursor: 'pointer',
                        //     clickable: true,
                        //     data: {...item}
                        // })
                        // circleMarker.setMap(map)
                        marker.on('click', (e) => this.clickHandler(e, map));
                    })
                    this.map = map
                })
            },
            getAllSchool() {
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify({catid: 603})}`).then(res => {
                    console.log(res)
                    this.schoolList = res.data.data.news
                    this.initMap()
                })
            },
            getLeftSchool() {
                // 如果在详情页搜索 跳转全部页面
                if (this.navContent === 'info') {
                    this.changeSelect(this.selectBtn[1])
                    return
                }
                if (!this.schoolParams.stype) {
                    delete this.schoolParams.stype
                }
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify(this.schoolParams)}`).then(res => {
                    console.log(res)
                    this.highSchoolList = res.data.data.news
                })
            },
            getLeftNews() {
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify(this.newParams)}`).then(res => {
                    let leftNews = res.data.data.news.map(item => {
                        item.updatetime = moment.unix(+item.updatetime).format('YYYY-MM-DD')
                        return item
                    })
                    this.newParams.page++
                    console.log(this.leftNews)
                    this.leftNews = this.leftNews.concat(leftNews)
                    if (leftNews.length >= this.newParams.num) {
                        this.allowRequest = true
                    }
                })
            },
            /**
             * 跳转学校的详情
             */
            toSchoolInfo(school, index) {
                this.description = false
                if (index) {
                    this.schoolItemIndex = index
                }
                console.log(school)
                this.findSchool(school)
                this.navContent = 'details'
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=eduinfo&${qs.stringify({
                    id: school.id
                })}`).then(res => {
                    res.data.data.zixun.map(item => {
                        item.updatetime = moment.unix(+item.updatetime).format('YYYY-MM-DD')
                    })
                    console.log(res)
                    this.schoolDetails = res.data.data
                    this.initFractional()
                    // this.getSchoolInfo(school.id, 1)
                    this.changeSchoolInfoTab(this.infoTab[0])
                })
            },
            /**
             * 获得学校的信息
             */
            getSchoolInfo(id, newstype) {
                console.log(id)
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&catid=604&${qs.stringify({
                    school: id,
                    newstype
                })}`).then(res => {
                    console.log(res)
                    this.schoolDetails.zixun = res.data.data.news
                })
            },
            /**
             * 切换学校资讯的tab
             */
            changeSchoolInfoTab(item) {
                this.infoTab.map(tab => {
                    tab.select = false
                })
                console.log(this.schoolDetails.school.id)
                item.select = true
                this.infoType = item.newstype
                this.getSchoolInfo(this.schoolDetails.school.id, item.newstype)
            },
            /**
             * 找到学校的位置
             */
            findSchool(school) {
                let infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(0, -20),
                    content: `<div class="info-window">
                                <div>${school.title}</div>
                                <div class="tag-box">
                                    ${this.handleLetter(school)}
                                </div>
                              </div>`
                })
                infoWindow.open(this.map, [school.longitude, school.latitude])
                this.map.setZoomAndCenter(this.map.getZoom(), [parseFloat(school.longitude), parseFloat(school.latitude)]); //同时设置地图层级与中心点
            },
            handleLetter(school) {
                let str = ''
                if (school.letter) {
                    let arr = school.letter.split(',')
                    console.log(arr)
                    arr.map(item => {
                        str += `<div class="tag-item">${item}</div>`
                    })
                }
                return str || ''
            },
            toDetails(item) {
                console.log(item)
                if (item.islink !== '0') {
                    window.open(item.url)
                } else {
                    this.$router.push({path: 'MobileNewsDetails', query: {id: item.id}})
                }
            },
            /**
             * 初始化内容中的 分数线
             */
            initFractional() {
                let echart = echarts.init(document.getElementById('fractional-line'))
                options.xAxis.data = this.schoolDetails.grade.map(item => item.year)
                options.series[0].data = this.schoolDetails.grade.map(item => item.tzs)
                options.series[1].data = this.schoolDetails.grade.map(item => item.zbs)
                echart.setOption(options)
            },
            clickHandler(event, map) {
                let data = event.target.Ce.data
                // 创建 infoWindow 实例
                let infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(0, -20),
                    content: `<div class="info-window">
                                <div>${data.title}</div>
                              </div>`
                })
                infoWindow.open(map, data.center)
                this.changeSelect(this.schoolList[0])
                this.toSchoolInfo(data)
            },
            /**
             * 跳转外连接
             */
            toOutLink(item) {
                if (item.islink !== '0') {
                    window.open(item.url)
                }
            },
            /**
             * 上拉加载
             */
            pullUpLoading() {
                this.$nextTick(() => {
                    let oBox = this.$refs.list
                    let oMap = document.getElementById('map')
                    console.log(oMap.offsetHeight)
                    console.log(oBox.offsetHeight)
                    this._handleScroll = () => {
                        //当前视图距离顶部的距离
                        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                        //视图的高度
                        let innerHeight = window.innerHeight
                        //整个dom文档的高度
                        let offsetHeight = oMap.offsetHeight + oBox.offsetHeight
                        // console.log(scrollTop,innerHeight,offsetHeight)
                        if (offsetHeight <= innerHeight + scrollTop && this.allowRequest) {
                            //第一次请求时关闭请求开关,知道回调给数据时,再次打开请求开关
                            this.allowRequest = false
                            this.getLeftNews()
                        }
                    }
                    window.addEventListener('scroll', this._handleScroll)
                })
            },
            downLoad() {
                window.open('http://jnjyt.appsback.sobeycloud.com/download/app?tenantid=jnjyt&app_id=1')
            }
        },
        mounted() {
            this.getAllSchool()
            this.getLeftNews()
            this.pullUpLoading()
        },
        watch: {
            navContent(val) {
                console.log(val)
                if (val !== 'info') {
                    window.removeEventListener('scroll', this._handleScroll)
                }else if(val === 'info') {
                    this.pullUpLoading()
                }
            }
        }
    }
</script>

<style scoped lang="less">
    #MobileHome {
        .content {
            display: flex;
            height: 100vh;
            width: 100%;
            position: absolute;
            overflow-x: hidden;
            overflow-y: auto;
            background: white;
            /*background-color: #C8C8C8*/

            .map-box {
                z-index: 200;
                position: relative;
                width: 100%;
                height: 65vh;

                .map {
                    z-index: 200;
                    position: fixed;
                    width: 100%;
                    height: 65vh;
                }

                .app-download {
                    position: absolute;
                    width: 40vw;
                    height: 10vw;
                    background: rgb(21,130,159);
                    color: white;
                    right: 5vw;
                    bottom: 5vw;
                    z-index: 500;
                    border-radius: 2vw;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .6em;

                    i {
                        margin-right: 1vw;
                    }
                }
            }
        }

        header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #DDD;
            position: fixed;
            z-index: 300;
            background: rgba(247, 247, 247, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 100%;
            font-size: 16px;
            padding: 8px 16px 8px 10px;
            box-sizing: border-box;

            > img {
                width: 10vw;
                margin: 0 10vw 0 5vw;
            }

            > div {
                font-size: 16px;
                line-height: 20px;
                color: black;
            }
        }

        .content-box {
            z-index: 250;
            position: absolute;
            top: 65vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            padding: 5vw 0;
            box-sizing: border-box;

            .search-box {
                border: 1px solid #DDD;
                width: 80vw;
                height: 42px;
                margin: 0 auto 10px;
                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                border-radius: 6px;
                display: flex;
                align-items: center;

                > input {
                    height: 60%;
                    width: 70%;
                    border: none;
                    margin-left: 20px;
                }

                > div {
                    width: 20%;
                    height: 80%;
                    border-left: 1px solid #ddd;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .icon-bg {
                        background-color: #F5F5F5;
                        border-radius: 16px;
                        height: 28px;
                        width: 28px;
                        padding: 7px;
                        box-sizing: border-box;
                        cursor: pointer;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            .select-box {
                margin: 0 auto 5vw;
                width: 80vw;
                height: 20vw;
                border-bottom: 1px solid #ddd;
                display: flex;
                align-items: center;
                justify-content: space-between;

                > div:nth-of-type(1) {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;

                    > div {
                        /*margin-left: 10px;*/
                        width: 65px;
                        height: 24px;
                        border: 1px solid rgba(242, 242, 242, 1);
                        opacity: 1;
                        border-radius: 16px;
                        text-align: center;
                        line-height: 24px;
                        cursor: pointer;
                        font-size: .8em;
                    }

                    .select {
                        background: #EEEEEE;
                    }
                }

            }

            .nav-list {
                width: 80vw;
                box-sizing: border-box;
                /*height: calc(100% - 120px);*/
                overflow: auto;
                /*修改滚动条样式*/

                .nav-title {
                    font-size: 16px;
                    font-weight: bold;
                    width: 80vw;
                    margin: 0 auto;
                }

                .school-box {
                    .school-item {
                        width: 80vw;
                        margin: 10px auto;
                        display: flex;
                        justify-content: space-between;
                        background: #FFF;
                        border: 1px solid rgba(0, 0, 0, 0.05);
                        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                        border-radius: 6px;
                        font-size: 14px;
                        line-height: 20px;
                        padding: 12px 16px;
                        cursor: pointer;
                        user-select: none;
                        color: rgba(51, 51, 51, 1);
                        font-weight: 600;
                        box-sizing: border-box;

                        &:hover {
                            background: linear-gradient(98.7deg, rgba(255, 255, 255, 0.3) 0%, rgba(235, 235, 235, 0.3) 100%), radial-gradient(50% 351.19% at 50% 50%, rgba(0, 128, 157, 0.016) 0%, rgba(0, 128, 157, 0.02) 100%), #FFFFFF;
                            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
                            border: 1px solid #00809D;
                            color: #00809D;
                        }

                        > span {
                            color: #999999;
                        }
                    }

                    .school-item-focus {
                        background: linear-gradient(98.7deg, rgba(255, 255, 255, 0.3) 0%, rgba(235, 235, 235, 0.3) 100%), radial-gradient(50% 351.19% at 50% 50%, rgba(0, 128, 157, 0.016) 0%, rgba(0, 128, 157, 0.02) 100%), #FFFFFF;
                        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
                        border: 1px solid #00809D;
                        color: #00809D;
                    }
                }
            }
        }
    }

    .list-item {
        margin: 10px auto;
        width: 80vw;

        .item-top {
            width: 100%;
            display: flex;
            padding: 10px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            box-sizing: border-box;
            cursor: pointer;

            .banner-box {
                width: 78px;
                height: 76px;
                overflow: hidden;

                > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .item-content {
                height: 76px;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                > div:nth-of-type(1) {
                    width: 149px;
                    height: 58px;
                    font-size: 13px;
                    color: rgba(51, 51, 51, 1);
                }

                > div:nth-of-type(2) {
                    /*width: 65px;*/
                    height: 16px;
                    font-size: 12px;
                    color: rgba(118, 118, 118, 1);
                }
            }
        }

        .item-bottom {
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            box-sizing: border-box;
            cursor: pointer;

            > div:nth-of-type(1) {
                /*width: 244px;*/
                height: 58px;
                font-size: 13px;
            }

            > div:nth-of-type(2) {
                height: 16px;
                font-size: 12px;
            }
        }
    }

    .school-info {
        /*position: absolute;*/
        background: white;
        width: 100%;
        /*height: calc(90% - 30px);*/
        overflow: hidden;
        padding-top: 10px;

        > h2 {
            width: 95%;
            margin: 10px auto;
            color: #333333;
        }

        .info-banner {
            width: 85%;
            margin: 10px auto;

            > img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: contain;
            }
        }

        .info-introduce {
            width: 85%;
            margin: 10px auto 20px;
        }

        #fractional-line {
            width: 75vw;
            height: 40vw;
            margin: 10px auto;
            /*border: 1px solid rgba(0, 0, 0, 0.05);*/
            box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; //将h-shadow,v-shadow设为0px,实现四周阴影
            /*box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);*/
            border-radius: 6px;
            /*box-sizing: border-box;*/
            padding-bottom: 10px;
        }

        .tab-box {
            margin: 5vw auto 0;
            width: 75vw;
            height: 8vw;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .tab-item {
                width: 15vw;
                height: 5vw;
                border-radius: 5vw;
                border: 1px solid rgba(0, 0, 0, .1);
                color: black;
                text-align: center;
                align-items: center;
                font-size: .8em;
            }

            .tab-focus {
                color: rgb(13, 133, 162);
            }
        }

        .teacher-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .teacher-item {
                width: 38vw;

                > div:nth-of-type(1) {
                    height: 30vw;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 5vw;

                    > img {
                        width: 100%;
                    }
                }

                > div:nth-of-type(2) {
                    font-size: .8em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    height: 15vw;
                    line-height: 5vw;
                }

            }
        }

        .school-info-box {
            width: 85%;
            margin: 10px auto;

            > div:nth-of-type(1) {
                margin-top: 20px;
                width: 100%;
            }

            .img-box {
                width: 100%;

                > img {
                    border-radius: 10px;
                    width: 100%;
                }
            }
        }

        .code {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 20vw;
                height: 20vw;
                /*margin-right: 10px;*/
            }

            > div {
                width: 125px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    }

    .swiper-img {
        width: 100%;
    }

    /**
     资讯更多按钮
     */

    .more-btn {
        width: 170px;
        height: 40px;
        margin: 20px auto;
        text-align: center;
        line-height: 40px;
        color: rgba(118, 118, 118, 1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        cursor: pointer;
    }

    .two-line {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }
</style>